$turntable-wrap-margin:0px;
$turntable-wrap-width:410px;
$trunable-width:370px;
$light-bg-color:#FCA120;
$light-color:cyan;
$deep-color:yellow;

.turntable-wrap {
  position: relative;
  overflow: hidden;
  margin:$turntable-wrap-margin;
  width: $turntable-wrap-width;
  height: $turntable-wrap-width;
  /* border: 7px solid #b2a98d; */
  border-radius: 50%;  
  /* box-shadow: 0 0 20px #b2a98d; */
  background-color: $light-bg-color;
  display: flex;
  justify-content: center;
  align-items: center;
}

.turntable-wrap .light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: #e0ddd1; */
  animation: rotate 5s linear infinite;
}
.turntable-wrap .light span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 10px;
  height: 100%;
  border-radius: 50%;
  transform-origin: center center;
  /* background-color: red; */
}
.turntable-wrap .light span:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
@keyframes light-to-deep {
  0% {
      background: $deep-color;
      box-shadow: 0 0 4px $deep-color;
  }
  100% {
    background: $light-color;
    box-shadow: 0 0 4px $light-color;
  }
}
.turntable-wrap .light span:nth-of-type(even):before {
  background: $deep-color;
  animation: light-to-deep 1s linear infinite;
}
.turntable-wrap .light span:nth-of-type(odd):before {
  background: $light-color;
  animation: light-to-deep 1s linear reverse infinite;
}




/*转盘*/
.turntable {
  /* position: absolute; */
  /* margin: 20px; */
  width: $trunable-width;
  height: $trunable-width;
  border-radius: 50%;
  /* background: #fff; */
  /* background-color: blueviolet; */
  display: flex;
  justify-content: center;
  align-items: center;
}


/* $turntable-width:300px;  */

/*转盘背景*/
.turntable_bg {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #FFFFFF; 
}

.shape_half{
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  clip: rect(0px, $trunable-width*0.5, $trunable-width, 0px);
  border-radius: 50%;
  // background-color: cyan; 
  overflow: hidden;
}

.shanxin {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  clip: rect(0px, $trunable-width*0.5, $trunable-width*0.5, 0px);

  /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
  border-radius: 50%;
  // background-color: purple;
  /*-webkit-animation: an1 2s infinite linear; */
}
.turntable_bg_color1 {
  background-color:#F8EAFB;
}
.turntable_bg_color2 {
  background-color:#FFFFFF;
}
.rotate_f90deg {
  transform: rotate(-90deg);
}
.rotate_f30deg {
  transform: rotate(-30deg);
}
.rotate_30deg {
  transform: rotate(30deg);
}
.rotate_270deg {
  transform: rotate(270deg);
}
/*转盘伤的礼品*/

.turntable-wrap .turntable .gift {
  
  position: absolute;
  width: $trunable-width;
  height: $trunable-width;
  transform: rotate(45deg);
  /* background-color: blue; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.turntable-wrap .turntable .gift .giftItem {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 45%;
  height: 45%;
  transform-origin: right bottom;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.turntable-wrap .turntable .gift .giftItem  div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  /* width: 100px;
  height: 100px; */
   margin:auto;
  transform: rotate(-45deg);
  /* background-color: yellow; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.gift_img{
  width: 60px;
  height: 60px;
  // background-color: seagreen;
}

.gift_text{
  text-align: center;
  color:gold;
  // background-color: yellow;
  margin-top: 10px;
  font-size: 12px;
}

.pointer {
  position: absolute;
  width:50%;
  height: 50%;
}